
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  ScrollView,
  Image,
  TouchableOpacity,
} from 'react-native';
import BottomCommonCell from './BottomCommonCell';
var Home_D5 = require('../../LocalData/XMG_Home_D5.json');
export default class ShopCenter extends Component {
  render() {
    return (
      <View style={styles.container}>
        <BottomCommonCell
          leftIcon="gw"
          leftTitle="购物中心"
          rightTitle={Home_D5.tips}
        />
        <ScrollView style={styles.scrollViewStyle}
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          >
          {this.renderAllItem()}
        </ScrollView>
      </View>
    );
  }
  renderAllItem(){
    var itemArr = [];
    var shopData = Home_D5.data;
    for(var i=0; i<shopData.length; i++){
      var data = shopData[i];
      itemArr.push(
        <ShopCenterItem
          key={i}
          shopImage={data.img}
          shopSale={data.showtext.text}
          shopName={data.name}
          detailurl={data.detailurl}
          popToShopCenter = {(url)=>this.popToHome(url)}
        />
      );
    }
    return itemArr;
  }
  popToHome(url){
    if(url){
      this.props.popToHomeView(url);
    }
  }
}
class ShopCenterItem extends Component{
  render(){
    return(
      <TouchableOpacity activeOpacity={0.5} onPress={()=>this.clickItem(this.props.detailurl)}>
        <View style={styles.itemViewStyle}>
          <Image source={{uri:this.props.shopImage}} style={styles.imageStyle}/>
          <Text style={styles.shopSaleStyle}>{this.props.shopSale}</Text>
          <Text style={styles.shopNameStyle}>{this.props.shopName}</Text>
        </View>
      </TouchableOpacity>
    );
  }
  clickItem(detailurl){
    if(detailurl){
      this.props.popToShopCenter(detailurl);
    }
  }
}
const styles = StyleSheet.create({
  container: {
    marginTop:15,
    backgroundColor: '#F5FCFF',
  },
  scrollViewStyle:{
    flexDirection:'row',
    backgroundColor:'white',
    padding:10,
  },
  itemViewStyle:{
    margin:8,
  },
  imageStyle:{
    width:120,
    height:100,
    borderRadius:8,
  },
  shopNameStyle:{
    textAlign:'center',
    marginTop:5,
  },
  shopSaleStyle:{
    position:'absolute',
    left:0,
    bottom:30,
    backgroundColor:'red',
    color:'white',
    padding:3,
    borderTopRightRadius:8,
    borderBottomRightRadius:8,
  },
});
